<!--本页为左侧下拉菜单-->
<template>
  <el-row class="tac">
    <el-col :span="24">
      <el-menu
          :default-openeds="['basic','form','user','expert','team','data']"
          active-text-color="#409eff"
          background-color="#545c64"
          :default-active="$route.name"
          router
          text-color="#fff">

        <el-menu-item v-for="item in noChild" :key="item.path" :index="item.path" @click="clickMenu(item)">
          <i :class="'el-icon-'+item.icon"></i>
          <span slot="title">{{ item.name }}</span>
        </el-menu-item>

        <el-submenu v-for="item in hasChild" :key="item.id" :index="item.id">
          <template slot="title">
            <i :class="'el-icon-'+item.icon"></i>
            <span>{{ item.name }}</span>
          </template>

          <el-menu-item-group class="over-hide">
            <el-menu-item v-for="child in item.child" :key="child.path" :index="child.path" @click="clickMenu(child)">
              {{ child.label }}
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>

      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
import menu from '@/config/menu.json'

export default {
  name: 'navMenu',
  computed: {
    noChild() {
      return this.menu.filter(item => !item.child)
    },
    hasChild() {
      return this.menu.filter(item => item.child)
    },
  },
  methods: {
    clickMenu(child) {
      this.$router.push(child.path);
      this.$store.commit('selectMenu',child);
    }
  },
  data() {
    return {
      menu,
      openedTab: [],
    }
  }
}
</script>

<style scoped>
.over-hide {
  overflow-x: hidden;
}

.el-submenu__title {
  border-bottom: 1px solid #8d98a2
}

.el-menu {
  height: 100vh;
}
</style>